<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/" class="breadcrumb-box">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 用户列表
        </el-breadcrumb-item>
        <el-button type="primary" class="add-vest" @click="handleVestState">新增马甲号</el-button>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="select_cate" placeholder="筛选学校" class="handle-select mr10">
          <el-option
            v-for="school in schoolList"
            :key="school['Name']"
            :label="school['Name']"
            :value="school['SchoolId']"
          ></el-option>
        </el-select>
        <el-select v-model="userType" placeholder="选择类型" class="handle-select mr10">
            <el-option key="0" label="全部" value="0"></el-option>
            <el-option key="1" label="正常账号" value="1"></el-option>
            <el-option key="2" label="马甲账号" value="2"></el-option>
        </el-select>
        <el-input v-model="select_word" placeholder="输入用户昵称" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <el-table :data="users" border class="table" ref="multipleTable">
        <el-table-column prop="UserId" label="ID" width="120" align="center"></el-table-column>
        <el-table-column label="头像" sortable width="150" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.Avatar" alt srcset class="user-head" />
          </template>
        </el-table-column>
        <el-table-column prop="Nickname" label="昵称" width="120"></el-table-column>
        <el-table-column prop="Gender" label="性别" width="120"></el-table-column>
        <el-table-column prop="City" label="城市"></el-table-column>
        <el-table-column prop="RegisterIp" label="IP"></el-table-column>
        <el-table-column prop="RegisterTime" label="注册时间"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              :class="scope.row.Status==1?'red':''"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
            >{{scope.row.Status==1?"禁言":"解禁"}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :page-size="pageSize"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="userTotalCount"
        ></el-pagination>
      </div>
    </div>
    <div class="add-vest-box" v-show="showAddvest">
      <div class="add-vest-con">
        <i class="el-icon-close" @click="handleVestState"></i>
        <div class="vest-item">
          <span class="vest-item-title">选择学校：</span>
          <el-select
            v-model="addVestData['schoolId']"
            placeholder="选择学校"
            class="handle-select add-vest-select mr10"
          >
            <el-option
              v-for="(school, index) in schoolList"
              v-show="index>0"
              :key="school['Name']"
              :label="school['Name']"
              :value="school['SchoolId']"
            ></el-option>
          </el-select>
        </div>
        <div class="vest-item">
          <span class="vest-item-title">昵称：</span>
          <el-input
            v-model="addVestData['nickname']"
            placeholder="输入用户昵称"
            class="handle-input add-vest-nick mr10"
          ></el-input>
        </div>
        <div class="vest-item">
          <span class="vest-item-title">头像：</span>
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="addVestData['avatar']" :src="addVestData['avatar']" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="vest-item">
          <el-button class="subVestBtn" type="primary" @click="subVest">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserList, ban, addVest } from "../../api/user";
import { getSchoolList } from "../../api/school";
import { setTimeout } from 'timers';
export default {
  name: "basetable",
  data() {
    return {
      userList: [],
      schoolList: [],
      userTotalCount: 0,
      pageSize: 10,
      cur_page: 1,
      multipleSelection: [],
      select_cate: "",
      select_word: "",
      del_list: [],
      is_search: false,
      editVisible: false,
      delVisible: false,
      form: {
        name: "",
        date: "",
        address: ""
      },
      idx: -1,
      id: -1,
      imageUrl: "",
      showAddvest: false,
      addVestData: {
        nickname: "",
        avatar: "",
        schoolId: ""
      },
      userType:'',
      uploadUrl: this.$baseUrl + "/gateway/api/system/upload"
    };
  },
  created() {
    this.getData();
    this._getSchoolList();
  },
  computed: {
    users() {
      return this.userList.map(d => {
        d.Gender = d.Gender == 1 ? "男" : "女";
        return d;
      });
    }
  },
  methods: {
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },
    // 获取 easy-mock 的模拟数据
    getData() {
      getUserList({
        Page: this.cur_page,
        nickname: this.select_word,
        schoolId: this.select_cate,
        Identity: this.userType
      })
        .then(res => {
          if (res.flag == 1) {
            this.userList = res.data.Results;
            this.userTotalCount = res.data.TotalCount;
            this.pageSize = res.data.PageSize;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    /**
     * 请求学校列表
     */
    _getSchoolList() {
      getSchoolList({
        type: "first"
      })
        .then(res => {
          if (res.flag == 1) {
            res.data.Results.unshift({
              schoolId: 0,
              Name: "全部"
            });
            this.schoolList = res.data.Results;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    search() {
      this.getData();
    },
    handleEdit(index, row) {
      const userState = this.userList[index].Status;
      const userId = this.userList[index].UserId;
      const newStatus = userState == 1 ? "2" : 1;
      const that = this;
      let options = {
        type: userState == 1 ? "ban" : "unban",
        userId: userId
      };
      const tipTitle = newStatus == "1" ? "确定禁言" : "确定解禁";
      this.$confirm(tipTitle, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          ban(options).then(
            res => {
              if (res.flag == 1) {
                that.userList[index].Status = newStatus;
                that.$message({
                  message: res.msg,
                  type: "success",
                  duration: 500
                });
              } else {
                that.$message.error(res.msg);
              }
            },
            err => {
              that.$message.error(err.msg);
            }
          );
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    handleAvatarSuccess(res, file) {
      this.addVestData.avatar = res.data.url
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    handleVestState(){
        this.showAddvest = !this.showAddvest;
    },
    subVest() {
      if (this.addVestData.schoolId == "") {
        this.$message({
          message: "请选择学校",
          type: "error"
        });
        return false;
      }
      if (this.addVestData.nickname == "") {
        this.$message({
          message: "请输入昵称",
          type: "error"
        });
        return false;
      }
      if (this.addVestData.avatar == "") {
        this.$message({
          message: "请上传头像",
          type: "error"
        });
        return false;
      }
      addVest(this.addVestData).then(res=>{
          if(res.flag==1){
              this.$message({
                  message:res.msg,
                  type:"success"
              });
              setTimeout(()=>{
                  this.showAddvest = false;
                  this.cur_page = 1;
                  this.getData();
              },500);
          }else{
              this.$message({
                  message:res.msg,
                  type:"error"
              });
          }
      }).catch(err=>{
          this.$message({
              message:err.msg,
              type:"error"
          });
      });
    }
  }
};
</script>

<style scoped>
.breadcrumb-box {
  line-height: 2;
}
.add-vest {
  float: right;
}
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.user-head {
  width: 60px;
  height: 60px;
}
/*添加马甲号*/
.add-vest-box {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.add-vest-con {
  width: 500px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  border-radius: 8px;
  margin-top: -200px;
  margin-left: -250px;
  box-sizing: border-box;
  padding: 30px;
}
.el-icon-close {
  position: absolute;
  top: 20px;
  right: 20px;
}
.add-vest-select,
.add-vest-nick {
  width: 300px;
}
.vest-item {
  margin-bottom: 15px;
}
.vest-item-title {
  display: inline-block;
  width: 80px;
  vertical-align: top;
}
.avatar-uploader {
  display: inline-block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.subVestBtn {
  float: right;
}
</style>
